<template>
	<div
		class="h-full bg-zinc-200 dark:bg-zinc-800 duration-300 overflow-auto xl:pt-1"
	>
		<div
			class="relative max-w-screen-lg mx-auto bg-white dark:bg-zinc-900 duration-300 xl:rounded-sm xl:border-zinc-200 xl:dark:border-zinc-600 xl:border xl:px-4 xl:py-2"
		>
			<!-- 移动端navbar -->
			<m-navbar sticky v-if="isMobileTerminal">个人资料</m-navbar>

			<!-- PC端标题 -->
			<div v-else class="text-lg font-bold text-center mb-4 dark:text-zinc-300">
				个人资料
			</div>

			<div class="h-full w-full px-1 pb-4 text-sm mt-2 xl:text-center xl:w-2/3">
				<!-- 头像部分 -->
				<div class="py-1 xl:absolute xl:right-[16%] xl:text-center">
					<span
						class="w-8 inline-block mb-2 font-black text-sm dark:text-zinc-300 xl:block xl:mx-auto"
						>我的头像</span
					>
					<div
						@click="onAvtarClick"
						class="relative w-[80px] h-[80px] group xl:cursor-pointer xl:left-1/2 xl:translate-x-[-50%]"
					>
						<img
							class="rounded-full w-full h-full xl:inline-block"
							:src="userInfo.avatar"
							alt=""
						/>
						<div
							class="absolute top-0 rounded-full w-full h-full duration-300 bg-black/40 hidden xl:group-hover:block"
						>
							<m-svg-icon
								name="change-header-image"
								class="w-2 h-2 m-auto mt-2"
							></m-svg-icon>
							<div
								class="text-xs text-white dark:text-zinc-300 scale-90 mt-0.5"
							>
								点击更换头像
							</div>
						</div>
					</div>
					<!-- 隐藏域 -->
					<input
						accept=".png, .jpeg, .jpg, .gif"
						ref="inputFileTarget"
						v-show="false"
						type="file"
						@change="onSelectImgHandler"
					/>
					<p class="mt-1 text-zinc-500 dark:text-zinc-400 text-xs xl:w-10">
						支持jpg、png、jpeg、gif格式大小1M以内的图片
					</p>
				</div>

				<!-- 信息输入 -->
				<div class="py-1 xl:flex xl:items-center xl:my-1">
					<span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0"
						>用户名</span
					>
					<m-input
						class="w-full"
						max="20"
						v-model="userInfo.nickname"
					></m-input>
				</div>
				<div class="py-1 xl:flex xl:items-center xl:my-1">
					<span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0"
						>职位</span
					>
					<m-input class="w-full" v-model="userInfo.title"></m-input>
				</div>
				<div class="py-1 xl:flex xl:items-center xl:my-1">
					<span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0"
						>公司</span
					>
					<m-input class="w-full" max="20" v-model="userInfo.company"></m-input>
				</div>
				<div class="py-1 xl:flex xl:items-center xl:my-1">
					<span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0"
						>个人主页</span
					>
					<m-input class="w-full" v-model="userInfo.homePage"></m-input>
				</div>
				<div class="py-1 xl:flex xl:items-center xl:my-1">
					<span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0"
						>个人介绍</span
					>
					<m-input
						class="w-full"
						tepe="textarea"
						max="50"
						v-model="userInfo.introduction"
					></m-input>
				</div>

				<!-- 保存修改 -->
				<m-button
					@click="onChangeProfile"
					class="w-full mt-2 mb-4 dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]"
					>保存修改</m-button
				>

				<!-- 移动端退出登录 -->
				<m-button
					:loading="loading"
					v-if="isMobileTerminal"
					@click="onLogoutClick"
					class="w-full mt-2 mb-4 dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]"
					>退出登录</m-button
				>
			</div>
		</div>

		<!-- PC端裁剪头像 -->
		<m-dialog
			v-if="!isMobileTerminal"
			title="裁剪头像"
			v-model="isDialogVisible"
		>
			<change-avatar-vue
				@close="isDialogVisible = false"
				:blob="currentBlob"
			></change-avatar-vue>
		</m-dialog>
		<!-- 移动端裁剪头像 -->
		<m-popup
			v-else
			v-model="isDialogVisible"
			:class="{ 'h-screen': isDialogVisible }"
		>
			<change-avatar-vue
				@close="isDialogVisible = false"
				:blob="currentBlob"
			></change-avatar-vue>
		</m-popup>
	</div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { isMobileTerminal } from '@/utils/flexible.js'
import { useStore } from 'vuex'
import { putProfile } from '@/api/sys'
import { message } from '@/libs'
import changeAvatarVue from './components/change-avatar.vue'

const store = useStore()

const inputFileTarget = ref(null)
const onAvtarClick = () => {
	inputFileTarget.value.click()
}

const onLogoutClick = () => {
	store.dispatch('user/logout')
}

// 数据本地的双向同步
const userInfo = ref(store.getters.userInfo)

const loading = ref(false)
const onChangeProfile = async () => {
	loading.value = true

	await putProfile(userInfo.value)
	message('success', '修改成功')

	// 同步本地vuex
	store.commit('user/setUserInfo', userInfo.value)
	loading.value = false
}

const isDialogVisible = ref(false)
const currentBlob = ref('')

// 选中文件之后的回调
const onSelectImgHandler = () => {
	const imgFile = inputFileTarget.value.files[0]

	// 生成blob对象
	const blob = URL.createObjectURL(imgFile)
	currentBlob.value = blob
	isDialogVisible.value = true
}

// 当两次选择的文件是同一个的时候，change的回调不会再次触发
// 所以需要手动清空input的value

watch(
	() => isDialogVisible.value,
	(val) => {
		if (!val) {
			inputFileTarget.value.value = ''
		}
	}
)
</script>

<style scoped lang="scss"></style>
